<template>
     <!-- 年龄弹窗 --> 
    <transition
      name="custom-classes-transition"
      enter-active-class="animated fadeInUp"
      leave-active-class="animated fadeOutDown"
    >
      <div class="van-model" v-show="isShowAgesModel">
        <van-picker
          class="van-picker"
          show-toolbar
          title="年龄"
          :columns="agesColumns"
          :default-index="9"
          @cancel="onAgesCancel"
          @confirm="onAgesConfirm"
        />
      </div>
    </transition>
</template>
<script> 
import Vue from "vue" 
import mixin from "@/utils/mixin" 
import { Toast,Picker } from "vant"
Vue.use(Toast).use(Picker);
let _agesColumns = [];
for (let i = 16; i <= 60; ++i) {
  _agesColumns.push(i + "岁");
}
export default {
  name: "ModalAges",
  mixins: [mixin],
  props: [
      "isShowAgesModel", 
  ],
  data() {
    return {  
      agesColumns: _agesColumns,
    };
  },
  mounted() {},
  methods: {
    // 省市 
    onAgesConfirm(value) { 
        this.$emit("update:isShowAgesModel" ,false);   
        this.$emit("onAgesConfirm", value );  
      //   Toast(`当前值：${value}, 当前索引：${index}`);
    },
    onAgesCancel() {
        this.$emit("update:isShowAgesModel" ,false);   
    }, 
  }
};
</script>
<style lang="scss" scoped>

</style>
